<template>
    <div class="home">
        <!--    <router-link to="/home/goods">商品</router-link>-->
        <!--    <router-link to="/home/User">用户</router-link>-->
        <!--    <el-button type="primary">主要按钮</el-button>-->
        <el-container>
            <el-header height="50px">
                <el-row >
                    <el-col :span="2">
                        <div class="grid logo">
                            <a href="https://www.jd.com/?cu=true&utm_source=sogou-pinzhuan&utm_medium=cpc&utm_campaign=t_288551095_sogoupinzhuan&utm_term=72c3e74a359c48598c6fabe6c1169112_0_c21e20a3406247309273b1742e2efbf6"><img src="/京东.jpg" height="50px" id="img2"></a>
                        </div>
                    </el-col>

                    <el-col :span="9">
                        <div class="grid linknav">
                          <el-link href="https://element.eleme.io" target="_blank" :underline="false"><a href="https://www.jd.com/?cu=true&utm_source=sogou-pinzhuan&utm_medium=cpc&utm_campaign=t_288551095_sogoupinzhuan&utm_term=72c3e74a359c48598c6fabe6c1169112_0_c21e20a3406247309273b1742e2efbf6">首页</a></el-link>
<!--                          <el-link type="primary" :underline="false"><a href="https://www.jd.com/?cu=true&utm_source=sogou-pinzhuan&utm_medium=cpc&utm_campaign=t_288551095_sogoupinzhuan&utm_term=72c3e74a359c48598c6fabe6c1169112_0_c21e20a3406247309273b1742e2efbf6">首页</a></el-link>-->
                          <el-link type="success" :underline="false">成功链接</el-link>
                          <el-link type="warning" :underline="false">警告链接</el-link>
                          <el-link type="danger" :underline="false">危险链接</el-link>
                          <el-link type="info" :underline="false">信息链接</el-link>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div class="grid search">
                          <el-input
                                  size="small"
                                  placeholder="请输入内容"
                                  suffix-icon="el-icon-search"
                                  v-model="input3">
                          </el-input>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div class="grid login">
                          <el-link type="text" :underline="false" href="/register">注册</el-link>
                          <el-link type="text" :underline="false">/</el-link>
                          <el-link type="text" :underline="false">登录</el-link>
                        </div>
                    </el-col>
                </el-row>
            </el-header>
            <el-main class="content" >

              <el-row class="content1">
                <el-col :span="5">
                  <div class="grid">

                      <ul id="uul" >
                          <li @mouseover="flag=true" @mouseout="flag=false">衣服
                              <ul id="uul2" v-show="flag">
                                  <li><a href="https://www.nike.com/cn/w/?cp=cnns_sz_071516_a_ALNUL_sg01_title">nike</a></li>
                                  <li><a href="https://www.adidas.com.cn/?utm_source=sogou&utm_medium=brandzone&utm_campaign=brandzone-alwayson-cn-exact&utm_content=main-title-pc">adidas</a></li>
                                  <li><a href="https://www.nike.com/cn/w/?cp=cnns_sz_071516_a_ALNUL_sg01_title">AJ</a></li>
                                  <li><a href="https://www.balenciaga.com.cn/">巴黎世家</a></li>
                                  <li><a href="https://vans.com.cn/">vans</a></li>
                              </ul>
                          </li>
                          <li @mouseover="flag2=true" @mouseout="flag2=false">裤子
                              <ul v-show="flag2" id="uul3">
                                  <li><a href="http://www.hlamall.cn/">海澜之家</a></li>
                                  <li><a href="https://www.levi.com.cn/">李维斯</a></li>
                                  <li><a href="http://www.hlamall.cn/">海澜之家</a></li>
                                  <li><a href="https://www.levi.com.cn/">李维斯</a></li>
                                  <li><a href="https://vans.com.cn/">vans</a></li>
                              </ul>
                          </li>
                          <li @mouseover="flag3=true" @mouseout="flag3=false">鞋子
                              <ul v-show="flag3" id="uul4">
                                  <li><a href="https://www.nike.com/cn/w/?cp=cnns_sz_071516_a_ALNUL_sg01_title">AJ</a></li>
                                  <li><a href="https://www.balenciaga.com.cn/">巴黎世家</a></li>
                                  <li><a href="https://www.nike.com/cn/w/?cp=cnns_sz_071516_a_ALNUL_sg01_title">AJ</a></li>
                                  <li><a href="https://www.balenciaga.com.cn/">巴黎世家</a></li>
                                  <li><a href="https://vans.com.cn/">vans</a></li>
                              </ul>
                          </li>
                          <li @mouseover="flag4=true" @mouseout="flag4=false">吊毛
                              <ul v-show="flag4" id="uul5">
                                  <li><a href="https://www.versace.cn/zh-cn/主页/">达哥同款</a></li>
                                  <li><a href="https://www.baidu.com/">叼毛</a></li>
                                  <li><a href="https://www.nike.com/cn/w/?cp=cnns_sz_071516_a_ALNUL_sg01_title">AJ</a></li>
                                  <li><a href="https://www.balenciaga.com.cn/">巴黎世家</a></li>
                                  <li><a href="https://vans.com.cn/">vans</a></li>
                              </ul>
                          </li>
                          <li @mouseover="flag4=true" @mouseout="flag4=false">沙雕
                              <ul v-show="flag4" id="uul6">
                                  <li><a href="https://www.versace.cn/zh-cn/主页/">达哥同款</a></li>
                                  <li><a href="https://www.baidu.com/">叼毛</a></li>
                                  <li><a href="https://www.nike.com/cn/w/?cp=cnns_sz_071516_a_ALNUL_sg01_title">AJ</a></li>
                                  <li><a href="https://www.balenciaga.com.cn/">巴黎世家</a></li>
                                  <li><a href="https://vans.com.cn/">vans</a></li>
                              </ul>
                          </li>
                      </ul>



                  </div>

                </el-col>

                <el-col :span="19">
                  <div class="grid">
                    <el-carousel trigger="click" height="300px">
                      <el-carousel-item >
                        <img src="/1.jpg" height="300px" width="1150px">
                      </el-carousel-item>
                        <el-carousel-item>
                            <img src="/2.jpg" height="300px" width="1150px">
                        </el-carousel-item>
                        <el-carousel-item>
                            <img src="/何昊天.png" height="300px" width="1150px">
                        </el-carousel-item>
                    </el-carousel>


                      <el-row  id="rrr">
                          <h1>零基础就业</h1>
                          <div class="content2">
                              <el-col :span="6">
                                  <img src="/course.png">
                              </el-col>
                              <el-col :span="6">
                                  <img src="/course.png">
                              </el-col>

                              <el-col :span="6">
                                  <img src="/course.png">
                              </el-col>
                              <el-col :span="6">
                                  <img src="/course.png">
                              </el-col>
                          </div>
                      </el-row>

                  </div>


                </el-col>



              </el-row>
                <el-row>
                    <el-table
                            :data="tableData"
                            height="250"
                            border
                            sizi="mini">
                        <el-table-column
                                prop="date"
                                label="日期"
                                width="180">
                        </el-table-column>
                        <el-table-column
                                prop="name"
                                label="姓名"
                                width="180">
                        </el-table-column>
                        <el-table-column
                                prop="address"
                                label="地址"
                                align="center">
                        </el-table-column>
                        <el-table-column label="操作">
                            <template slot-scope="scope">
                                <el-button
                                        size="mini"
                                        @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                                <el-button
                                        size="mini"
                                        type="danger"
                                        @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-row>


                <!--                  <div id="d3"><a href="https://pic.sogou.com/pics?query=%D0%C7%BF%D5&ie=gbk&p=40230500&st=255&mode=255&policyType=0-->
<!--"><img src="星空.jpg" width="400px" height="300px" href=""></a></div>-->




            </el-main>



            <el-footer>
                <span style="color:#696969;">本网站利用 cookie 分析自身及其它网站的信息，以投放合乎您偏好的广告。 欲了解更多内容，或选择不接受所有或某些 cookie，请点击</span>
                <a title="链接将在新标签页中打开" href="https://www.versace.cn/zh-cn/legal/cookie-policy.html" target="_blank"><span style="color:#696969;">此处</span></a>
            </el-footer>

        </el-container>

<!--            <router-view></router-view>-->

    </div>

</template>
<script>
    // function ss() {
    //     alert("你号")
    // }
    export default {
        data() {

            return {
                flag:false,
                flag2:false,
                flag3:false,
                flag4:false,
                msg: "hello vue",
                input3:"",

                tableData: [{
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-04',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-01',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-08',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-06',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-07',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }]

            };
        },
        computed: {},
        watch: {},
        methods: {

        },
        created() {
            // this.show();
        },


    }

</script>
<style scoped>
    #rrr{
       margin-left: -350px !important;
    }

    .content2 img:hover{
        box-shadow:0 0 10px #ddd ;
        transform: scale(1.1);
        transition: 1s; /* 变性这个动作完成的时长*/
    }
    .content2 .grid{
        height: 80px;
    }
    #uul5{
        list-style: none;
        /*display: none;*/
        position: absolute;
        left:250px ;
        top: 0px;
        z-index: 3;
        /*background-color: red;*/
        opacity: 0.8;
        width: 200px;
    }
    #uul5>li>a{
        text-decoration: none;
        text-align: center;
    }
    #uul6{
        list-style: none;
        /*display: none;*/
        position: absolute;
        left:250px ;
        top: 0px;
        z-index: 3;
        /*background-color: red;*/
        opacity: 0.8;
        width: 200px;
    }
    #uul6>li>a{
        text-decoration: none;
        text-align: center;
    }


    #d3{
        width: 60px;
        height: 60px;
        background-color: black;
        position: absolute;
        bottom: 325px;
        z-index: 999999;
    }
  .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 150px;
    margin: 0;

  }


  .el-header, .el-footer {
        background-color: #B3C0D1;
        color: #333;
        text-align: center;
        /*line-height: 50px;*/

    }

    .el-main {
        background-color: #E9EEF3;
        color: #333;
        text-align: center;
        /*line-height: 160px;*/
    }

    .el-row {
        /*height: 60px !important;*/
    }

    .grid {
        border-radius: 4px;
        height: 50px;
      line-height: 50px;
        margin-left: 80px;
    }
  #img2{
    opacity: 1;
  }
    .linknav a{
    margin:auto 10px;
  }
  .linknav a:nth-of-type(1){
    margin-left: -40px;
  }
  .login a{
     float: right;
  }
  /*.content1 .grid{*/
  /*  height: 300px;*/
  /*  border-radius: 10px ;*/
  /*  background-color: white;*/
  /*}*/
  .content{
    background-color: white;
      height: 650px;
      padding: 20px 100px;


  }
  .content .el-row{
    height: 600px;
    border-radius: 10px ;
    background-color: white;
    box-shadow: 0px 0px 10px #ddd;


  }
  .content1{
      margin-right: -20px;
      overflow: hidden;
      width: 1460px;
      height: 1200px;


  }

    #uul{
       list-style: none;
        margin-top: 0px;
        margin-left: -20px;
    }
    #uul li{
        margin-left: -40px;
        border-bottom:solid 1px black;
        border-radius: 10px;
        background-color: pink;
    }
    #uul2{
        list-style: none;
        /*display: none;*/
        position: absolute;
        left:250px ;
        top: 0px;
        z-index: 3;
        /*background-color: red;*/
        opacity: 0.8;
        width: 200px;
    }
  #uul3{
      list-style: none;
      /*display: none;*/
      position: absolute;
      left:250px ;
      top: 0px;
      z-index: 3;
      /*background-color: red;*/
      opacity: 0.8;
      width: 200px;
  }
  #uul3>li>a{
      text-decoration: none;
      text-align: center;
  }

    #uul2>li>a{
        text-decoration: none;
        text-align: center;
    }
  #uul4{
      list-style: none;
      /*display: none;*/
      position: absolute;
      left:250px ;
      top: 0px;
      z-index: 3;
      /*background-color: red;*/
      opacity: 0.8;
      width: 200px;
  }
  #uul4>li>a{
      text-decoration: none;
      text-align: center;
  }



  </style>